<template>
    <div class="comment" v-if="commentData">
        <div class="comment_add">
            <div class="add_title">评论酒店</div>
            <div class="add_input">
                <div class="add_text"><input ref="input3" type="text" placeholder="写评论"></div>
                <div class="reply" @click="issue_comment">评论</div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="paging">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 20, 60, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="commentData.total">
            </el-pagination>
        </div>
        <!-- 分页 -->
        <div class="big" v-for="(item,index) in pagingData" :key="index">
           <div class="big_one">
                <div class="comment_user">
                <div class="commetn_user_img">
                    <div class="img"><img :src="'http://157.122.54.189:9095'+item.account.defaultAvatar" alt=""></div>
                    <div class="name"><div>{{item.account.nickname}}</div> <span>LV.8</span> </div>
                </div>
                <div class="comment_user_date">{{$dayjs(item.created_at).format('YYYY-MM-DD')}}</div>
                </div>
                <div class="comment_data">
                    <div class="comment_data_text">{{item.content}}</div>
                    <div class="input" ref="reqly"><input placeholder="添加回复" type="text" @focus="reply_show(index)" ref="input1"></div>
                    <div class="comment_comment" ref="comm">
                        <div class="data_re" ref="data_re"><input type="text" @blur="reqly_conceal(index)" ref="input2"></div>
                        <div class="write" @click="reqly_comment(index,item.id)">回复</div>
                    </div>
                </div>
           </div>
           <div class="big_two" v-for="(item1,index1) in item.followed" :key="index1">
               <div class="big_two_img">
                    <img :src="'http://157.122.54.189:9095'+item.account.defaultAvatar" alt="">
                    <div class="flur">
                        <div class="big_two_nickname">{{item.account.nickname}}</div>
                        <div class="big_two_date">{{ $dayjs(item1.created_at).format('YYYY-MM-DD') }}</div>
                    </div>
               </div>
               <div class="big_two_comment"><span>回复''{{item.account.nickname}}'':</span>   {{item1.content}}</div>
           </div>
        </div>
    </div>
</template>

<script>

export default {
    data(){
        return {
            pageSize: 5,
            currentPage: 1,  // 当前页
            pagingData: {},  // 分页后数据

            commentData: {},
            data: [],
            form:{
                content: '',
                score: {
                    location: 3.6,
                    service: 3.6,
                    fancility: 3.6,
                    all: 3.6
                },
                follow: '',
                hotel: this.$route.params.id
            }
        }
    },
    created(){
        this.get_comment()
    },
    methods: {
        async get_comment () {
            const res = await this.$axios({
                url: 'http://157.122.54.189:9095/hotels/comments',
                params: {
                    hotel: this.$route.params.id,
                    _limit: 100
                }
            })
            this.commentData = res.data
            this.data = res.data.data.reverse()

            this.pagein_dispose()
        },
        pagein_dispose () {
            let start = (this.currentPage - 1) * this.pageSize  //开始条数
            let end = this.currentPage * this.pageSize          //结束条数
            let pagingData =  this.data.filter((v,i)=>{
                if(i>=start && i<end) {
                    return true
                }else {
                    return false
                }
            })
            this.pagingData = pagingData
        },
        issue_comment (index) {
            if(this.form.content.trim() === ''){
                this.$message.error('未输入内容')
                return
            }else if(!this.$store.state.user.token) {
                this.$message.error('未登录')
                this.$store.commit('page/setSourceURL',this.$route.fullPath)
                this.$router.push('/user/login')
                return
            }
            this.$axios({
                url: 'http://157.122.54.189:9095/comments',
                method: 'POST',
                headers: {
                    Authorization: "Bearer " + this.$store.state.user.token
                },
                data: this.form
            }).then(res=>{
                this.$message(res.data.message)
                if(this.form.follow) {
                    this.$refs.input2[index].value = ''
                    this.$refs.input1[index].value = ''
                }else {
                    this.$refs.input3.value = ''
                }
                this.form.content = ''
                this.form.follow = ''
                this.get_comment()
            })
        },
        reply_show (index) {
            this.$refs.reqly[index].style.display = 'none' 
            this.$refs.comm[index].style.display = 'block'
            this.$refs.data_re[index].style.border = '#409eff 1px solid'
            this.$refs.input2[index].focus()
        },
        reqly_conceal (index) {
            setTimeout(()=>{
                this.$refs.reqly[index].style.display = 'block'
                this.$refs.comm[index].style.display = 'none'
            },100)
            this.$refs.input1[index].value = this.$refs.input2[index].value
        },
        reqly_comment (index,id) {
            this.form.follow = id
            this.form.content = this.$refs.input2[index].value
            this.issue_comment(index)
        },
        reply_to_main_comment () {
            this.form.content = this.$refs.input3.value
            this.issue_comment()
        },

        handleSizeChange (val) {  // 条数改变
            this.pageSize = val
            this.pagein_dispose()
        },
        handleCurrentChange (val) {  //当前页改变
            this.currentPage = val
            this.pagein_dispose()
        }
    }
}
</script>

<style lang="less" scoped>
.comment {
    width: 100%;
    padding: 10px 0;
    .comment_add {
        padding-bottom: 10px;
        .add_title {
            font-size: 20px;
            padding-bottom: 10px;
        }
        .add_input {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .add_text {
                width: 100%;
                border: solid 1px #cbced3;
                height: 40px;
                margin-bottom: 10px;
                border-radius: 4px;
                padding-left: 10px;
                input {
                    outline: none;
                    border: none;
                    width: 100%;
                    height: 100%;
                }
            }
            .reply {
                background: #409eff;
                color: white;
                width: 60px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-radius: 10px;
                cursor: pointer;
            }
        }
    }
    .big {
        // width: 100%;
        // display: flex;
        // padding: 20px 0;
        // border-top: dashed 1px #dadada;
        .big_one {
            width: 100%;
            display: flex;
            padding: 20px 0;
            border-top: dashed 1px #dadada;
        }
        .comment_user {
            flex: 1.5;
            .commetn_user_img {
                display: flex;
                .img {
                    width: 65px;
                    height: 65px;
                    border: solid 2px #e8b86a;
                    border-radius: 50%;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
                .name {
                    color: #e8b86a;
                    padding-left: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    span {
                        color: #e93205;
                    }
                }
            }

            .comment_user_date {
                color: #756d62;
                font-size: 14px;
                padding-top: 10px ;
            }
        }
        
        .comment_data {
            flex: 8;
            padding-top: 30px;
            .comment_data_text {
                color: #838383;
                margin-bottom: 10px;
            }
            .input {
                width: 100%;
                height: 36px;
                border: solid 1px #dedfe1;
                border-radius: 4px;
                padding-left: 10px;
                input {
                    border: none;
                    width: 100%;
                    height: 100%;
                    outline: none;
                }
            }
            .comment_comment {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                display: none;
                .data_re {
                    width: 100%;
                    border: 1px solid #dedfe1;
                    height: 40px;
                    padding-left: 10px;
                    border-radius: 4px;
                    input {
                        outline: none;
                        border: none;
                    }
                }
                .write {
                    width: 80px;
                    line-height: 30px;
                    border-radius: 8px;
                    background: #33c1ea;
                    margin: 10px 0 0;
                    text-align: center;
                    color: white;
                    cursor: pointer;
                }
            }
        }
        .big_two {
            display: flex;
            margin: 10px 0 10px 100px;
            flex-direction: column;
            background: #dddddd;
            padding: 10px;
            .big_two_img {
                width: 180px;
                height: 60px;
                display: flex;
                img {
                    display: block;
                    width: 75px;
                    height: 60px;
                    border-radius: 50%;
                    padding-right: 10px;
                }
                .big_two_nickname {
                    font-size: 14px;
                    color: #e8b86a;
                    padding-top: 10px;
                }
                .big_two_date {
                    font-size: 12px;
                    padding-top: 6px;
                    color: rgb(107, 104, 104);
                }
            }
            .big_two_comment {
                font-size: 16px;
                padding-left: 70px;
                span {
                    color: rgb(107, 104, 104);
                }
            }
        }
    }
}
</style>